<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="ico/favicon.ico" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./fonts/fonts2/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <!-- 头部区 -->
    <header class="maxmain content">
        <div class="maxmain nav por">
            <div class="inp">
                <div class="close">
                    <i class="iconfont icon-jiantou-zuo"></i>
                </div>
                <input type="text" placeholder="在 Microsoft.com 中搜索">
                <i class="iconfont icon-weibiaoti-"></i>
                <button class="btn2">
                    取消
                </button>
            </div>
            <div class="logo">
                <h1>
                    <a href="index.html" title="Microsoft">
                        <img src="./img/RE1Mu3b.png" alt="">
                    </a>
                </h1>
            </div>
            <ul class="list-wrap">
                <li><a href="./page/microsoft365.html">Microsoft 365</a></li>
                <li><a href="./page/office.html">Office</a></li>
                <li><a href="./page/windows.html">Windows</a></li>
                <li class="li4"><a href="./page/surface.html">Surface</a></li>
                <li class="li3"><a href="./page/xbox.html">Xbox</a></li>
                <li class="li1"><a href="./page/discount.html">优惠</a></li>
                <li class="li1"><a href="./page/support.html">支持</a></li>
                <li class="moreselect  por" id="more1">
                    <a href="javascript:;">更多</a>
                    <ul class="ulshow">
                        <li><a href="javascript:;">优惠</a></li>
                        <li><a href="javascript:;">支持</a></li>
                    </ul>
                </li>
                <li class="moreselect  por" id="more2">
                    <a href="javascript:;">更多</a>
                    <ul class="ulshow">
                        <li><a href="javascript:;">优惠</a></li>
                        <li><a href="javascript:;">支持</a></li>
                        <li><a href="javascript:;">Xbox</a></li>
                    </ul>
                </li>
                <li class="moreselect  por" id="more3">
                    <a href="javascript:;">更多</a>
                    <ul class="ulshow">
                        <li><a href="javascript:;">优惠</a></li>
                        <li><a href="javascript:;">支持</a></li>
                        <li><a href="javascript:;">Xbox</a></li>
                        <li><a href="javascript:;">Surface</a></li>
                    </ul>
                </li>
            </ul>
            <!-- 搜索 -->
            <div class="menu cursor">
                <span>
                    <button class="btn">所有的 Microsoft</button>
                </span>
                <div class="nav_min">
                    <!-- 更多 -->
                    <i class="iconfont icon-gengduo"></i>
                </div>
                <div class="menu_list listshow">
                    <dl>
                        <dt>软件</dt>
                        <dd><a href="javascript:;">Windows 应用</a></dd>
                        <dd><a href="javascript:;">OneDrive</a></dd>
                        <dd><a href="javascript:;">Outlook</a></dd>
                        <dd><a href="javascript:;">Skype</a></dd>
                        <dd><a href="javascript:;">OneNote</a></dd>
                        <dd><a href="javascript:;">Microsoft</a></dd>
                    </dl>
                    <dl>
                        <dt>pc和设备</dt>
                        <dd><a href="javascript:;">购买 Xbox</a></dd>
                        <dd><a href="javascript:;">pc 和平板电脑</a></dd>
                        <dd><a href="javascript:;">配件</a></dd>
                    </dl>
                    <dl>
                        <dt>娱乐</dt>
                        <dd><a href="javascript:;">Xbox 与游戏</a></dd>
                        <dd><a href="javascript:;">pc 游戏</a></dd>
                    </dl>
                    <dl>
                        <dt>企业版</dt>
                        <dd><a href="javascript:;">Microsoft Azure</a></dd>
                        <dd><a href="javascript:;">Microsoft 365</a></dd>
                        <dd><a href="javascript:;">Microsoft industry</a></dd>
                        <dd><a href="javascript:;">数据平台</a></dd>
                        <dd><a href="javascript:;">Power Platform</a></dd>
                        <dd><a href="javascript:;">购买商业版</a></dd>
                    </dl>
                    <dl>
                        <dt>开发人员与IT</dt>
                        <dd><a href="javascript:;">NET</a></dd>
                        <dd><a href="javascript:;">Visual Studio</a></dd>
                        <dd><a href="javascript:;">Windows Server</a></dd>
                        <dd><a href="javascript:;">开发 Windows应用</a></dd>
                        <dd><a href="javascript:;">文档</a></dd>
                        <dd><a href="javascript:;">Power Apps</a></dd>
                    </dl>
                    <dl>
                        <dt>其他</dt>
                        <dd><a href="javascript:;">免费下载与安全性</a></dd>
                        <dd><a href="javascript:;">教育</a></dd>
                    </dl>
                    <div class="map">
                        <a href="javascript:;">查看站点地图</a>
                    </div>
                </div>
                <div class="search por ">
                    <button class="open btn"><a>搜索</a></button>
                    <i class="iconfont icon-weibiaoti-"></i>
                </div>

            </div>
            <!-- 登录 -->
            <div class="info cursor">
                <a href="./page/shopcar.html">
                    <span>购物车</span>
                    <i class="iconfont icon-gouwuche"></i>
                </a>
                <a href="./page/login.html">
                    <span>登录</span>
                    <i class="iconfont icon-user"></i>
                </a>
            </div>
            <div class="nav_list navshow poa">
                <ul>
                    <li><a href="./page/microsoft365.html">Microsoft 365</a></li>
                    <li><a href="./page/office.html">Office</a></li>
                    <li><a href="javascript:;">Windows</a></li>
                    <li><a href="javascript:;">Surface</a></li>
                    <li><a href="javascript:;">Xbox</a></li>
                    <li><a href="javascript:;">优惠</a></li>
                    <li><a href="javascript:;">支持</a></li>
                    <li class="select">
                        <a href="javascript:;">软件</a>
                        <ul class="show">
                            <li><a href="javascript:;">Windows 应用</a> </li>
                            <li><a href="javascript:;">OneDrive</a></li>
                            <li><a href="javascript:;">Outlook</a></li>
                            <li><a href="javascript:;">Skype</a></li>
                            <li><a href="javascript:;">OneNote</a></li>
                            <li><a href="javascript:;">Microsoft Teams</a> </li>
                        </ul>
                        <div class="select_icon">
                            <i class="iconfont icon-jiantoudown"></i>
                        </div>
                    </li>
                    <li class="select">
                        <a href="javascript:;">PC 和设备</a>
                        <ul class="show">
                            <li><a href="javascript:;">Teams</a></li>
                            <li><a href="javascript:;">PC 和平板电脑</a></li>
                            <li><a href="javascript:;">配件</a> </li>
                        </ul>
                        <div class="select_icon">
                            <i class="iconfont icon-jiantoudown"></i>
                        </div>
                    </li>
                    <li class="select">
                        <a href="javascript:;">娱乐</a>
                        <ul class="show">
                            <li><a href="javascript:;">Xbox 与游戏</a></li>
                            <li><a href="javascript:;">pc 游戏</a></li>
                        </ul>
                        <div class="select_icon">
                            <i class="iconfont icon-jiantoudown"></i>
                        </div>
                    </li>
                    <li class="select">
                        <a href="javascript:;">企业版</a>
                        <ul class="show">
                            <li><a href="javascript:;">Microsoft Azure</a></li>
                            <li><a href="javascript:;">Microsoft 365</a></li>
                            <li><a href="javascript:;">Microsoft industry</a></li>
                            <li><a href="javascript:;">数据平台</a></li>
                            <li><a href="javascript:;">Power Platform</a></li>
                            <li><a href="javascript:;">购买商业版</a></li>
                        </ul>
                        <div class="select_icon">
                            <i class="iconfont icon-jiantoudown"></i>
                        </div>
                    </li>
                    <li class="select">
                        <a href="javascript:;">开发人员与IT</a>
                        <ul class="show">
                            <li><a href="javascript:;">NET</a></li>
                            <li><a href="javascript:;">Visual Studio</a></li>
                            <li><a href="javascript:;">Windows Server</a></li>
                            <li><a href="javascript:;">开发 Windows应用</a></li>
                            <li><a href="javascript:;">文档</a></li>
                            <li><a href="javascript:;">Power Apps</a></li>
                        </ul>
                        <div class="select_icon">
                            <i class="iconfont icon-jiantoudown"></i>
                        </div>
                    </li>
                    <li><a href="javascript:;">查看站点地图</a></li>
                </ul>
            </div>
        </div>

    </header>
    <!-- 内容区 -->
    <div class="maxmain content">
        <!-- 轮播图区 -->
        <div class="opt">
            <div class="swiper">
                <ul class="imgbox por">
                    <li style="display: block;background: #f2f2f2;">
                        <div class="img">
                            <img src="./img/index/RWAx7Z (1).png" alt="">
                            <img src="./img/index/RWAx7Z.png" alt="">
                        </div>
                        <div class="text">
                            <div>
                                <h4>全新 Surface Laptop 4 </h4>
                                <p>集时尚超薄设计、多任务处理速度与提升的性能于一体，助力完成所有工作 </p>
                                <div class="discount cursor">
                                    <a href="javascript:;">立即优惠</a>
                                    <i class="iconfont icon-jiantou"></i>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="display: none;background-color:#e6e6e6">
                        <div class="img">
                            <img src="./img/index/RE4ntGe.jpg" alt="">
                            <img src="./img/index/RE4ntGe (1).jpg" alt="">
                        </div>
                        <div class="text">
                            <div>
                                <h4>Surface Pro 7</h4>
                                <p>随心所欲，百变菁英 </p>
                                <div class="discount">
                                    <a href="javascript:;">立即优惠</a>
                                    <i class="iconfont icon-jiantou"></i>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="display: none;background-color:#e0e1e5">
                        <div class="img">
                            <img src="./img/index/re5.jpg" alt="">
                            <img src="./img/index/re6.jpg" alt="">
                        </div>
                        <div class="text">
                            <div>
                                <h4>Surface Laptop Go</h4>
                                <p>选择轻盈的 Surface 笔记本电脑，充分利用每一天</p>
                                <div class="discount">
                                    <a href="javascript:;">立即优惠</a>
                                    <i class="iconfont icon-jiantou"></i>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="display: none;background-color:#f2f2f2">
                        <div class="img">
                            <img src="./img/index/PC_4.jpg" alt="">
                            <img src="./img/index/MB_4.jpg" alt="">
                        </div>
                        <div class="text">
                            <div>
                                <h4>Surface 指定星品</h4>
                                <p>5月13日至30日，更有24期免息分期以及限量好礼等着你！</p>
                                <div class="discount">
                                    <a href="javascript:;">立即优惠</a>
                                    <i class="iconfont icon-jiantou"></i>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- 左右按钮 -->
                <div class="last cursor">
                    <i class="iconfont icon-xiazai6"></i>
                </div>
                <div class="next cursor">
                    <i class="iconfont icon-jiantou"></i>
                </div>
                <!-- 小圆点 -->
                <ul class="slider">
                    <li style="background: black;" class="dot cursor" title="幻灯片1"></li>
                    <li class="dot cursor" title="幻灯片2"></li>
                    <li class="dot cursor" title="幻灯片3"></li>
                    <li class="dot cursor" title="幻灯片4"></li>
                    <li class="st cursor">
                        <span>
                            <i class="iconfont icon-zanting"></i>
                        </span>
                        <div class="stop">
                            暂停幻灯片
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 购买 -->
            <div class="buy">
                <ul class="buy_list">
                    <li>
                        <a href="javascript:;">
                            <img src="./img/index/RE4sQDc.png" alt="">
                            <p>选择你的 Microsoft 365</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/index/RE4pndL.png" alt="">
                            <p>购买 Surface 设备</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/index/RE4pxBu.png" alt="">
                            <p>购买 Xbox 游戏和主机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/index/RE4pkvE.png" alt="">
                            <p>购买 Windows 10</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/index/RE4rriw.png" alt="">
                            <p>购买商用版</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 商品 -->
        <div class="goods clearfix">
            <div class="goods_on fl">
                <div class="goods_list1 fl">
                    <div class="goods1">
                        <div class="list_go">
                            <img src="./img/index/RE4FTtq.webp" alt="">
                            <h3>Surface Laptop Go</h3>
                            <div class="list_info">
                                <p>选择轻盈的 Surface 笔记本电脑，造型时尚与卓越性能兼备，充分利用每一天。</p>
                            </div>
                            <div class="now">
                                <span style="transition: .3s;">立即购买</span>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                    <div class="goods1">
                        <div class="list_go">
                            <img src="./img/index/RE4E4rR.webp" alt="">
                            <h3>Microsoft 365</h3>
                            <div class="list_info">
                                <p>只需一次便捷的订阅，便可使用高级 Office 应用、额外的云存储、高级安全性等功能。</p>
                            </div>
                            <div class="now">
                                <a href="microsoft365.html">
                                    <span style="transition: .3s;">立即购买</span>
                                </a>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="goods_list1 fl">
                    <div class="goods1">
                        <div class="list_go">
                            <img src="./img/index/RE4DkWk.webp" alt="">
                            <h3>不错过任一美妙节拍</h3>
                            <div class="list_info">
                                <p>Surface Earbuds 提供沉浸式音效、卓越舒适度、直观控制等。</p>
                            </div>
                            <div class="now">
                                <span style="transition: .3s;">立即购买</span>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                    <div class="goods1">
                        <div class="list_go">
                            <img src="./img/index/REHt8H.webp" alt="">
                            <h3>Xbox One S</h3>
                            <div class="list_info">
                                <p>物超所值的游戏和娱乐设备，配备 4K 蓝光和视频流。</p>
                            </div>
                            <div class="now">
                                <span style="transition: .3s;">立即购买</span>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告区 -->
        <div class="swiper">
            <ul class="imgbox por">
                <li>
                    <div class="img">
                        <img src="./img/index/RE4MEu6.png" alt="">
                        <img src="./img/index/RE4MEu61.png" alt="">
                    </div>
                    <div class="text">
                        <div>
                            <h4> Xbox 控制器 </h4>
                            <p class="p">Elite 品质，无线连接，随处适用 - 无论你的游戏风格如何，这款控制器都能满足你的需求 </p>
                            <div class="discount cursor">
                                <a href="javascript:;">立即购买</a>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>



        </div>
        <!-- 商品2 -->
        <div class="goods clearfix ">
            <div class="titel por">
                <h4>商业版</h4>
            </div>
            <div class="goods_on fl">
                <div class="goods_list1 fl">
                    <div class="goods1">
                        <div class="list_go">
                            <img src="./img/index/RWAFAO.webp" alt="">
                            <h3>全新 Surface Laptop 4 商用版</h3>
                            <div class="list_info">
                                <p>提升的性能，更快的多任务处理速度，更长的电池续航时间，尽在时尚超薄设计之中。</p>
                            </div>
                            <div class="now">
                                <span style="transition: .3s;">立即预订</span>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                    <div class="goods1">
                        <div class="list_go">
                            <img src="./img/index/RWAFAR.webp" alt="">
                            <h3>全新 Surface Headphones 2+ 商用版</h3>
                            <div class="list_info">
                                <p>该款耳机经 Microsoft Teams 认证并具有 13 级主动降噪功能，让您专注于通话，免受噪音干扰。</p>
                            </div>
                            <div class="now">
                                <span style="transition: .3s;">了解更多</span>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="goods_list1 fl">
                    <div class="goods1">
                        <div class="list_go">
                            <img src="./img/index/RE4CFyx.webp" alt="">
                            <h3>Microsoft Teams</h3>
                            <div class="list_info">
                                <p>聊天、开会、通话和协作。</p>
                            </div>
                            <div class="now">
                                <span style="transition: .3s;">了解更多</span>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                    <div class="goods1">
                        <div class="list_go">
                            <img src="./img/index/RE4E4rT.webp" alt="">
                            <h3>Microsoft 365 商业版</h3>
                            <div class="list_info">
                                <p>借助功能强大的应用在工作效率、连接和安全性方面保持领先。</p>
                            </div>
                            <div class="now">
                                <span style="transition: .3s;">立即购买</span>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告区2 -->
        <div class="swiper">
            <ul class="imgbox por">
                <li>
                    <div class="img">
                        <img src="./img/index/RE4MhD5.jpg" alt="">
                        <img src="./img/index/RE4MhD51.jpg" alt="">
                    </div>
                    <div class="text env">
                        <div>
                            <h4> Envision </h4>
                            <p class="p">Envision Episode 2 通过探讨五种危机：健康、气候变化、就业、技术和全球 GDP 了解超越当今环境下的最新想法、转变和创新 </p>
                            <div class="discount cursor">
                                <a href="javascript:;">点击观看精彩视频</a>
                                <i class="iconfont icon-jiantou"></i>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 微信 -->
        <!-- 关注我们 -->
        <div class="wechat por">
            <span>关注 Microsoft </span>
            <svg class="icon " aria-hidden="true">
                <use xlink:href="#icon-weixin"></use>
            </svg>
            <div class="weixin_on poa">
                <img src="./img/index/RE1YlZt.png" alt="">
            </div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weibo"></use>
            </svg>
        </div>
    </div>
    <!-- 底部区 -->
    <div class="footer">
        <!-- 底部介绍 -->
        <div class="footer_nav clearfix maxmain">
            <div class="footer_nav_1 fl">
                <dl>
                    <dt class="mt">新增内容</dt>
                    <dd><a href="javascript:;">Microsoft 365</a></dd>
                    <dd><a href="javascript:;">Surface Pro 6</a>
                    <dd><a href="javascript:;">Surface Laptop 2</a> </dd>
                    <dd><a href="javascript:;">Surface Go</a></dd>
                    <dd><a href="javascript:;">Windows 10应用程序</a>
                </dl>
                <dl>
                    <dt>Microsoft Store
                    <dd><a href="javascript:;">账户个人资料</a></dd>
                    <dd><a href="javascript:;">下载中心</a></dd>
                    <dd><a href="javascript:;">订单跟踪</a></dd>
                </dl>
                <dl>
                    <dt>教育</dt>
                    <dd><a href="javascript:;">Microsoft 教育领域</a></dd>
                    <dd><a href="javascript:;">适合学生的Office</a></dd>
                    <dd><a href="javascript:;">适用于学校的 Microsoft 365</a> </dd>
                    <dd><a href="javascript:;">Microsoft Azure</a></dd>
                    <dd><a href="javascript:;">Windows 10应用程序</a> </dd>
                </dl>
            </div>
            <div class="footer_nav_1 mt fl">
                <dl>
                    <dt>企业</dt>
                    <dd><a href="javascript:;">Azure</a></dd>
                    <dd><a href="javascript:;">AppSource</a></dd>
                    <dd><a href="javascript:;">汽车</a></dd>
                    <dd><a href="javascript:;">政府机构</a></dd>
                    <dd><a href="javascript:;">医疗保健</a></dd>
                    <dd> <a href="javascript:;">制造业</a> </dd>
                    <dd><a href="javascript:;">金融服务</a></dd>
                    <dd><a href="javascript:;">零售业</a></dd>
                </dl>
                <dl>
                    <dt>开发人员</dt>
                    <dd><a href="javascript:;">Microsoft Visual Studio</a></dd>
                    <dd><a href="javascript:;">Windows 开发人员中心</a> </dd>
                    <dd><a href="javascript:;">开发人员中心</a></dd>
                    <dd><a href="javascript:;">Microsoft 开发人员计划</a> </dd>
                    <dd> <a href="javascript:;">第9频道</a></dd>
                    <dd> <a href="javascript:;">Office 开发人员中心</a> </dd>
                </dl>
                <dl>
                    <dt>公司</dt>
                    <dd> <a href="javascript:;">招贤纳士</a> </dd>
                    <dd> <a href="javascript:;">关于 Microsoft</a> </dd>
                    <dd> <a href="javascript:;">公司新闻</a> </dd>
                    <dd> <a href="javascript:;">Microsoft 隐私</a> </dd>
                    <dd> <a href="javascript:;">投资人</a> </dd>
                    <dd> <a href="javascript:;">安全性</a> </dd>
                </dl>
            </div>
        </div>
        <div class="info clearfix">
            <a href="javascript:;" class="fl">
                作者介绍
                <i class="iconfont icon-diqiu"></i>
            </a>
            <ul class="fr">
                <li>姓名:不可说</li>
                <li>性别:男 </li>
                <li>年龄:110</li>
                <li>身高:119</li>
                <li>电话:13949596979</li>
                <li>身份证号码:110119110119</li>
                <li>date:20210416</li>
            </ul>
        </div>
    </div>
</body>
<!-- 引入js -->
<script src="./js/index.js"></script>
<!-- 图标 -->
<script src="./fonts/iconfont.js"></script>

</html>